<template>
  <div>
    <pre> {{ myText }}</pre>
    <div v-html="myText2"></div>
    <div class="myText3">{{ myText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myText: "",
      myText2: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const list = [100, 200, 300, 400, 500];
      let str = "";
      let str2 = "";

      list.forEach((item) => {
        str += `转账${item}\n`;
        str2 += `转账${item}</br>`;
      });
      this.myText = str;
      this.myText2 = str2;
    },
  },
};
</script>

<style lang="scss" scoped>
.myText3 {
  white-space: pre-line; /* 或者 white-space: pre-wrap; */
}
</style>
